<template>
  <section id="bodyBox" class="mapBOX" :class="{'map3':moblie}">
    <el-dialog  :visible.sync="dialogVisible" width="250px" >
        <div class="q" id="qrCode" style="width: 230px; height: 230px;margin: auto">

        </div>
    </el-dialog>
    <section class="header" style="position: fixed;z-index: 1000;width: 100%" v-if="!moblie" >
       <HeaderPublc :ssechByBlilData="ssechByBlilData"></HeaderPublc>
    </section>
    <section class="cent" :shechidDda="shechidDda">
      <div id="plan" :mapLi="mapLi">
        <!-- 搜索-->
        <div class="saech" v-show="!firstSech && !moblie" :deviceId="deviceId" >
          <el-input class="saechIput"  v-model="input" :placeholder="fromBy=='web'?languageData.public.Ladingph:languageData.public.sechText"  ></el-input>
          <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="saechFn()"> </el-button>
          <div >
            <el-collapse-transition >
              <div v-show="showBox && fromBy !='web'" class="listBox">
                <div class="list" v-show="!errorText"  v-for="list in transport" :key="list.id" v-on:click="listFn(list.id)" style=" text-align: left;border-bottom:1px solid #e1e1e1 ">
                  <p style="margin: 0px 20px;line-height: 25px;color: #000">{{languageData.public.plalte}}：{{list.containerId}}</p>
                  <p style="margin: 0px 20px;line-height: 25px;color: #000   ">{{languageData.public.container}}：{{list.deviceNumber}}</p>
                </div>
                <p v-show="errorText">{{errorText}}</p>
              </div>
            </el-collapse-transition>
          </div>
        </div>

        <div class="Box" style="overflow: hidden;max-height: 700px">
          <div style="overflow-y:scroll;margin-right: -15px;margin-bottom: -20px; max-height: 700px;padding-bottom: 20px">
            <div v-for="(list,indexId) in byBlillList" :key="list.id">
              <div class="address clearfix " :class="{'type3':fromBy == 'web'}">
                <div class="none3"><p style="padding-left: 10px;font-weight: bold;font-size: 18px"> {{list.billNumber}}</p> </div>
                <div class="no"><p><span class="icon from" v-show="languageData.id == 'Chinese'"> 起 </span>
                  <span class="icon2 from" v-show="languageData.id != 'Chinese'"> From </span>
                  {{languageData.id=='Chinese'?list.startPosition: list.startPositionEn}}</p></div>
                <div class=" tow" ><p><span class="icon to" v-show="languageData.id == 'Chinese'"> 终 </span>
                  <span class="icon2 to" v-show="languageData.id != 'Chinese'" style="margin-right: 25px">  To</span>
                  {{ languageData.id=='Chinese' ? list.endPosition:list.endPositionEn}}</p>
                </div>
                <div class="none3" style="clear: both" @click="openFn(list,indexId)">
                  <p style="padding-left: 10px;font-size: 14px;cursor: pointer">
                    <span> 详情 </span> <span :class="{'el-icon-arrow-up':indexId != ndexId2,'el-icon-arrow-down':indexId == ndexId2}">  </span>
                  </p>
                </div>
              </div>
              <!-- 列表-->
              <el-collapse-transition>
                <div v-show="indexId == ndexId2">
                  <section id="list" v-if="!firstSech && !showBox ">
                    <div class="listTop">
                      <!-- 设备号-->
                      <p><label> {{languageData.public.container}}：</label> <span id="copyText">{{dataChart.deviceNumber}}</span></p>
                      <!-- 柜号车牌号-->
                      <p><label> {{dataChart.transportType==1?languageData.public.plalteB:languageData.public.plalte}}：</label> <span>{{dataChart.containerId}}</span></p>
                      <!-- 运输状态-->
                      <p><label> {{languageData.public.status}}：</label> <span class="status">{{languageData.id=='Chinese'?dataChart.transportStatustext.CN:dataChart.transportStatustext.EN}}</span> </p>
                      <!-- 设备状态-->
                      <p v-show="dataChart.timeStay"><span >{{dataChart.timeStayText}}</span></p>
                      <!-- 预计到达时间 deviceOnff-->
                      <p style="position: relative" v-show="dataChart.estimatedArrivalTime">
                        <label> {{languageData.public.arriveTime}}：</label> <span> </span>{{dataChart.estimatedArrivalTime}}
                      </p>
                      <!-- 创建时间 deviceOnff-->
                      <p style="position: relative">
                        <label> {{languageData.public.creaedTime}}：</label> <span> </span>{{dataChart.startTime}}
                        <span style="position: absolute;top: 0px;right: 10px">
                  <el-checkbox v-model="checked1" @change="cut">{{ languageData.public.statusOnly}}</el-checkbox>
                </span>
                      </p>

                      <span class="bot" :data-clipboard-text="dataChart.deviceNumber" v-on:click="copyFn(11)"> {{languageData.public.copy}} </span>
                    </div>
                    <div class="listCent">
                      <div class="listBoder" v-show="ULlist.last.location || ULlist.last.operStatusCN">
                        <!--最上面点--->
                        <div  class="first padding" v-on:click="updateMap(ULlist.first)">
                          <div v-show="ULlist.first.location">
                            <p>{{ULlist.first.location}}</p><i class="time" >{{ULlist.first.ymd}} {{ULlist.first.hms}}</i>
                          </div>
                          <div v-show="ULlist.first.operStatusCN">
                            <p >{{languageData.public.doingStatus}}：{{languageData.id=='Chinese'?ULlist.first.operStatusCN:ULlist.first.operStatusEN}}</p><i class="time">{{ULlist.first.operTimeText}}</i>
                          </div>
                          <div class="ricBoder">
                            <div class="ric"></div>
                          </div>
                        </div>
                        <div   class="aimintUl "  v-show="ULlist.list.length>0">
                          <ul id="ul" class="padding"  style="">
                            <li v-for="list in ULlist.list" v-on:click="updateMap(list)" v-show="list" :key="list.location">
                              <div v-show="list.location">
                                <p>{{list.location}}</p><i class="time">{{list.ymd}} {{list.hms}}</i>
                              </div>
                              <div v-show="list.operStatusCN">
                                <p style="font-weight: bold" :le="ULlist.list.length">{{languageData.public.doingStatus}}：{{languageData.id=='Chinese'?list.operStatusCN:list.operStatusEN}}</p><i class="time">{{list.operTimeText}}</i>
                              </div>
                              <div class="ricM"></div>
                            </li>
                          </ul>
                        </div>
                        <!--展开收起--->
                        <div class="next padding" v-show="ULlist.listCnut>2"><span style="margin-left: 5px" v-on:click="opentList()">{{clickText}}</span> <span :class="{'el-icon-arrow-up':clickStatus,'el-icon-arrow-down':!clickStatus}" v-on:click="opentList()"></span> </div>
                        <div  class="last padding" v-on:click="updateMap(ULlist.last)" v-show="ULlist.last.location || ULlist.last.operStatusCN">
                          <!-- 描述-->
                          <p class="" v-show="ULlist.last.location">{{ULlist.last.location}}</p>
                          <!-- 时间-->
                          <i class="time" >{{ULlist.last.ymd}} {{ULlist.last.hms}}</i>
                          <!-- 操作状态-->
                          <p v-show="ULlist.last.operStatusCN">{{languageData.public.doingStatus}}：{{languageData.id=='Chinese'?ULlist.last.operStatusCN:ULlist.last.operStatusEN}}</p><i class="time">{{ULlist.last.operTimeText}}</i>
                          <div class="ricBoder" :class="{'none':ULlist.list.length<=0}">
                            <div class="ric"></div>
                          </div>
                        </div>
                      </div>
                      <!-- 最下面点-->
                      <p v-show="!ULlist.last.location && !ULlist.last.operStatusCN">NO DATA</p>
                    </div>
                    <div class="listFooter">
                      <div>
                        <el-button class="con" round v-on:click="export2Excel()" style="width: 100%;margin-bottom: 10px">{{languageData.public.exportCSV}}</el-button>
                      </div>
                      <div v-if="!moblie">
                        <!-- QQ分享-->
                        <el-button class="con" round  @click="fenxing" target="_blank" style=""> {{languageData.public.ViaQQ}} </el-button>
                        <!-- QQ分享-->
                        <el-button class="con linkText"  :data-clipboard-text="linkText" round  @click="linkFn()" > {{languageData.public.ViaLink}}</el-button>
                        <!-- 微信分享-->
                        <el-button class="con" round  id="wx" target="_blank" style="" @click="qrCodeFn()"> {{languageData.public.ViaWechat}} </el-button>
                      </div>
                    </div>
                  </section>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>

        <section id="saechFirst" v-show="firstSech">
          <saechFirst></saechFirst>
        </section>
      </div>
      <div class="mapBox">
        <div id="map" class="" :class="{'map2':firstSech,'map':!firstSech,'map3':moblie}">
        </div>
      </div>
    </section>

    <section class="footer" >

    </section>
  </section>
</template>
<style scoped>
  .H_ib_body {background: #e1e1e1 !important}
  .type3 .tow{margin-left: 10px;float: left }
  .type3 .no{float: left;}
  .cent{ border-top:1px solid #dedede;}
  /*#bodyBox{background-color: #fff}*/
  .map{ background: grey; margin-right: 10px;margin-left:390px;margin-top: 50px;min-height: 850px;}
  .cent .map2{margin-left: 0px; background: grey; margin-right: 10px;margin-top: 50px}
  .map3  .mapBox{;position:fixed ;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1000}
  .map3  .map{margin: 0px;height: 100px;}
  .map3 .Box{position:fixed;top: 60px;left: 10px ;z-index: 1001 ;}
  #plan{float: left; width:366px;height:auto;position: absolute;top: 90px;left: 10px;}

  .saech{ width: 105%;height: 35px;margin-left: -5px;position: relative}
  .saechIput{width: 306px;margin-right: 0px;position: relative;z-index: 10;border: none 0px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 60px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .listBox{min-height: 100px; background-color: #fff;width: 350px;border: 1px solid #e1e1e1;margin-top: 10px;padding:10px 0px; position: relative; z-index: 1000;margin-left: 10px}
  .list{ cursor: pointer;padding-top: 5px;padding-bottom: 5px;}
  #list{ width:350px;height: auto;padding: 10px; background-color: #fff;margin: auto;margin-top: 10px;}
  #list p{font-size: 14px;text-align: left;line-height: 30px;word-break:break-all;}
  .listTop{ position: relative;border-bottom:1px solid #ccc;padding: 10px;padding-bottom:20px; }
  .bot{display: block;color: #666; width: 40px;height: 20px;border: 1px solid #666;position: absolute; text-align: center;font-size: 12px;line-height: 20px;top: 10px;right: 10px;cursor: pointer}
  .listCent{padding: 10px 20px;border-bottom:1px solid #ccc;padding-right: 0px;}

  .listCent p{line-height: 20px;}
  .next span{ font-size: 12px;cursor: pointer;color: #999}
  .ricBoder{ width: 10px;height: 20px;display: block;position: absolute;top: 0px;left: -1px;background: #fff}
  .ric{ width: 11px;height: 11px;border-radius:6px;border: 1px solid #ccc;display: block;position: absolute;top: 7px;left: -6px;background: #fff}
  .ricM{ width: 9px;height: 9px;border-radius:6px;border: 1px solid #ccc;display: block;position: absolute;top: 7px;left: -16px;background: #fff}
  .padding{padding-left: 10px; border-left:1px solid #ccc }
  .first{ position: relative; }
  .first p{ line-height: 30px;font-weight: bold;cursor: pointer;width:185px;word-break:break-all;}
  .last p{ line-height: 30px;font-weight: bold;cursor: pointer; width:185px;word-break:break-all;}
  .last p:hover{ color: #409eff}
  .first p:hover{ color: #409eff}
  .last{ position: relative;border:0px none}
  .last .ricBoder{ border-left: 1px solid #ccc;left: 0px}
  .last .ric{ border-left: 1px solid #ccc;left: -7px}
  li{position: relative;padding: 5px;}
  #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 160px; word-break:break-all;}
  #list li p:hover{ color: #409eff}
  .aimintUl{overflow: hidden;padding-left: 20px;position: relative;left: -20px;}
  ul{ padding: 0px;padding-bottom: 0px;height:0px;}
  .next{ width:120px;text-align: left;font-size: 12px;color: #999;padding-bottom: 5px;padding-left:10px;}
 .listFooter{padding-top: 13px;}
  .time{font-size: 12px;position: absolute;right: 0px;top: 10px;}
  #saechFirst{ width: 100%;height: 100%;margin: auto;position:fixed;top: 50px;left: 0px; z-index: 101;}
  iframe{left: 500px;}
  .last .none{border-left: 0px none}
  .address{ width: 100%;background-color: #fff;margin-top: 20px;padding: 0px 0px }
  .address p{font-size: 18px;font-weight: bold;text-align: left;line-height: 40px;color: #1d2739}
  .address p .icon{ margin-left: 10px;margin-right: 10px;border: #c0c4cc solid 1px;color: #000;font-weight: normal;font-size: 12px;line-height: 30px;padding: 2px 3px;border-radius:20px;position: relative;top: -2px }
  .address{ width: 100%;background-color: #fff;margin-top: 20px;padding: 5px 0px }
  .address p{font-size: 18px;font-weight: bold;text-align: left;line-height: 40px;color: #1d2739}
  .type3 p .icon{ margin-left: 10px;margin-right: 10px;border: #c0c4cc solid 1px;color: #000;font-weight: normal;font-size: 12px;line-height: 30px;padding: 2px 2px;border-radius:20px;position: relative;top: -2px;text-align: center }
  .address p .icon2{ margin-left: 10px;margin-right: 10px; color: #000;font-weight: normal;font-size: 12px;line-height: 30px;padding: 2px 3px;position: relative;top: -2px }
  .type3 p {font-size: 15px;font-weight: normal;line-height: 30px;}
  .none3{display: none}
  .type3 .none3{display: block}
</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import saechFirst from '../index.vue'
  import Public from '../../vuex/public.js'
  import Clipboard from 'clipboard'
  import {mapState, mapActions} from 'vuex'
  import makImg from '../../../static/img/icon/icon_car_nor.png'
  import wx from 'weixin-js-sdk'
  import QRCode from '../../vuex/qrcode'
  export default {
    name: 'my-map',
    created () {
      // 查看本页面路由
      this.check = this.$route.name
     // 查看有无登陆
      var userData = Public.publicLo.sessionStorageGet('user');
      this.fromBy = this.$route.query.companyNumber?'web':'';
      if(this.fromBy !='web'){
        this.ndexId2 =0;
      }
      if (userData) {
        // 转换对象
        userData = JSON.parse(userData)
        // 渲染
        this.user = {
          nickName: userData.nickName,
          headImg: userData.headImg,
          id: userData.userId
        }
      }
     this.versions = Public.publicLo.versions()

    },
    data () {
      return {
        byBlillList:[],
        ndexId2:-1,
        fromBy:'web',
        show3:false,
        mapId:'',
        moblie:false,// 是否手机端
        firs:true,
        versions:'',
        dialogVisible:false,
        checked1:false,
        tableData: [],
        makImg: makImg,
        map: {},
        type:1,
        mapDate: null,
        platform: null,
        behavior: null,
        defaultLayers: null,
        ui: null,
        // 上次列表
        list2: [],
        ULlist: {
          first: {
            lat: null, // 经度
            lng: null, // 纬度
            ymd: null,   // 日期
            hms: null,   // 时间
            location: null // 地址信息
          }, // 开始地址
          list: [],   // 中间地址
          last: {
            lat: null, // 经度
            lng: null, // 纬度
            ymd: null,   // 日期
            hms: null,   // 时间
            location: null // 地址信息
          }, //  第二次地址
          listCnut: null
        },
        dataChart: {
          containerId: null,
          transportStatus: null,
          transportStatustext:{EN:'', CN:''},
          deviceOnffText:{EN:'', CN:''},
          deviceNumber: null,
          startTime: null
        }, // 基础信息
        bubble: null,
        routeInstructionsContainer: null,
        input: null, // 设备id
        firstSech: true,  // 是否第一次搜索
        //
        clickText: '共10个位置',
        clickStatus: false,
        showBox: false,
        errorText: null,
        user: {
          nickName: null,
          headImg: null,
          id: null
        },
        mapType:'google',
        index:0,
        points:[],
        polylineList:[],
        infowindow:null,
        linkText:''
      }
    },
    methods: {
      ...mapActions({
        mapListpost: 'mapListFn',
        checkID: 'checkId',
        checkNumber: 'checkNumber',
        tokenWx:'tokenWx',
        sechByBlill:"sechByBlill"
      }),
      // 列表展开
      openFn(list,index){
        if(this.ndexId2 == index){
          this.ndexId2 = -1;
          return
        }
        this.tableData=[]
        this.ndexId2 = index;
        this.listFn(list.id)
      },
      // 渲染地图
      mapFn (map, parm) {
        if(this.mapType=='here'){
          if (parm) {
            map.setCenter({lat: parm.lat, lng: parm.lng})
          } else {
            map.setCenter({lat: 116.404, lng: 39.915})
          }
          map.setZoom(13)
          map.setBaseLayer(this.defaultLayers.normal.traffic)
        }
        if(this.mapType=='baidu'){
          var point
          if (parm) {
            point = new BMap.Point(parm.lng, parm.lat);
          } else {
            point = new BMap.Point(116.404, 39.915);
          }
          // 创建点坐标
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);
        }
        if(this.mapType=='google'){
            var point
            if (parm) {
              point =  new google.maps.LatLng(parm.lat, parm.lng);
            } else {
              point = new google.maps.LatLng(39.915,116.404);
            }
            var mapProp = {
              center:point,
              zoom:4,
              mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            this.map = new google.maps.Map(document.getElementById("map"), mapProp);
        }
      },
      linkFn(){
        this.copyF2()
      },
      cut(){
        // 未选中 切换第一次加载  数据
         if(!this.checked1){
         this.ULlist = this.ulListDATA
         }
        // 选中
        if(this.checked1){
          //不是第一次选中情况下 切换成 上次数据
             if(this.ulListData || !this.firs){this.ULlist = this.ulListData }else {
               // 第一次选中 去拼接数据
               this.mergeList(2)
             }
        }
        // 如果数据列表为空 补充默认值
        if(!this.ULlist){
          this.ULlist = {
            first: {
              lat: null, // 经度
              lng: null, // 纬度
              ymd: null,   // 日期
              hms: null,   // 时间
              location: null // 地址信息
            }, // 开始地址
            list: [],   // 中间地址
            last: {
              lat: null, // 经度
              lng: null, // 纬度
              ymd: null,   // 日期
              hms: null,   // 时间
              location: null // 地址信息
            }, //  第二次地址
            listCnut: 0
          }
        }
        // 中文计算收起点
        if (this.languageCheak == 'Chinese') {
          var le = this.ULlist.listCnut
          this.clickText = '共 ' + le + ' 个位置'
        }
        // 英文计算收起点
        if (this.languageCheak == 'English') {
          var le = this.ULlist.listCnut
          this.clickText = le + ' tracking event'
        }
        this.clickStatus = true
        this.opentList()
      },
      mapService () {
        // 选取地图容器

          var mapContainer = document.getElementById('map')
//        this.routeInstructionsContainer = document.getElementById('panel')
          // 地图配置：初始化与地图平台数据
          this.platform = new H.service.Platform({
            app_id: 'xDU8ZS8OLFy8aG8qzDKS',
            app_code: '7gaEA7LqoE9oFNnbyVFKTA'
          })
          //
          this.defaultLayers = this.platform.createDefaultLayers()
          //  初始化一张地图,设置中心点
          this.map = new H.Map(mapContainer,this.defaultLayers.normal.map)
          // 默认，实现泛/缩放。
          this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map))
          // 创建默认UI组件
          this.ui = H.ui.UI.createDefault( this.map, this.defaultLayers)
          // 创建地图
          this.mapFn(this.map)
      },
      /**
       * 谷歌地图
       */
      //加载谷歌地图静态文件
      googleMap(){
        // var script = document.createElement("script");
        // script.src = "http://maps.google.cn/maps/api/js?key=AIzaSyBXa5IGr11xML0OumozehXsvEJ9Y7tTV4Q&language=zh-CN&sensor=TRUE_OR_FALSE";
        // document.body.appendChild(script);
        var that=this;
          that.googleMapService()
      },
      //创建地图实例
      googleMapService () {
        this.mapFn()
        // var point = new BMap.Point(116.404, 39.915);
      },
      // 城市列表
      cityFn () {
        var ulr = '/api/cityList'
        this.$http.get(ulr, {
          headers: {
          }
        }).then(function (res) {
        })
      },
      // 计算和显示从点到b点的路线。
      calculateRouteFromAtoB (platform) {
        // 地图计算路径api
        var router = platform.getRoutingService(),
          // parm
          routeRequestParams = {
            mode: 'fastest;car',
            representation: 'display',
            routeattributes : 'waypoints,summary,shape,legs',
            maneuverattributes: 'direction,action',
            waypoint0: '52.5160,13.3779', // Brandenburg Gate
            waypoint1: '52.5206,13.3862'  // Friedrichstraße Railway Station
          };
        router.calculateRoute(
          routeRequestParams,
          this.onSuccess,
          this.onError
        )
      },
      /** 绘画路径
       * Creates a H.map.Polyline from the shape of the route and adds it to the map.
       * @param {Object} route A route as received from the H.service.RoutingService
       */
      addRouteShapeToMap (route,a) {
        //herrd地图
        if(this.mapType=='here'){
          var lineString = new H.geo.LineString()
          // 从shape绘画路径
          // routeShape = route.shape,
          var routeShape = route
          var  polyline
          // 轮询解析坐标
          routeShape.forEach(function (point) {
            // var parts = point.split(',')
            // 路径坐标收集
            lineString.pushLatLngAlt(point.lat, point.lng)
          })
          // 创建完整路径
          polyline = new H.map.Polyline(lineString, {
            style: {
              lineWidth: 4,
              strokeColor: 'rgba(0, 128, 255, 0.7)'
            }
          })
          // 将路径添加到地图
          this.map.addObject(polyline)
          // And zoom to its bounding rectangle/自适应显示路径
          this.map.setViewBounds(polyline.getBounds(), true)
          this.addManueversToMap(route)
        }
        if(this.mapType == 'baidu'){
          var pois = [];
          for(let i in route){
            if(route[0]){
              var p = new BMap.Point(route[i].lng, route[i].lat)
              p.location=route[i].location
              pois.push(p)
            }
          }
          var that = this
          if(pois.length<=10){
            this.points[0]=pois
          }
          this.points = this.pointsBefore(pois,10);
          this.polylineList=[]
          setTimeout(function(){
            that.convertor = new BMap.Convertor();
            //递归控制
            that.myTransMore(1,5)
          }, 1000);
        }
        if(this.mapType == 'google'){
          var myTrip=[]
          this.addManueversToMap(route,a)
          for(let i in route){
            // var x = new google.maps.Projection(route[i].lat,route[i].lng)
            // consoel.log(x,'x')
            var p = new google.maps.LatLng(route[i].lat,route[i].lng);
            myTrip.push(p)
          }
          var flightPath=new google.maps.Polyline({
            path:myTrip,
            strokeColor:"#0000FF",
            strokeOpacity:0.8,
            strokeWeight:6
          });
          flightPath.setMap(this.map);
        }
      },
      /** 创建地图点maneuver
       * Creates a series of H.map.Marker points from the route and adds them to the map.
       * @param {Object} route  A route as received from the H.service.RoutingService
       */
      addManueversToMap (route,a) {
        if(this.mapType=='here'){
          var svgMarkup = '<svg width="18" height="18" ' +
            'xmlns="http://www.w3.org/2000/svg">' +
            '<circle cx="8" cy="8" r="8" ' +
            'fill="#0077ff" stroke="white" stroke-width="1"  />' +
            '</svg>';
          var that = this
          var svgMarkup1 = '<img src="../../../static/img/icon/stra.png">',
            svgMarkup2 = '<img src="../../../static/img/icon/end.png">',
            dotIcon,
            group = new  H.map.Group()
          // 定义标注样式
          for (let i in route) {
            if(i==0){
              dotIcon = new H.map.Icon('../../../static/img/icon/stra.png',{anchor: {x:13, y: 11}})
            }else {
              if(i == route.length - 1 && i != 0){
                dotIcon = new H.map.Icon('../../../static/img/icon/end.png',{anchor: {x:15, y: 25}})
              }else {
                dotIcon = new H.map.Icon(svgMarkup, {anchor: {x: 8, y: 8}})
              }
            }
            // Add a marker to the maneuvers group 创建标注
            var marker = new H.map.Marker({lat: route[i].lat, lng: route[i].lng}, {icon: dotIcon})
            // 添加标注描述
            // marker.instruction = '第' + j + '个'
            marker.instruction = '<p style="font-size: 14px;text-align: left">当前:' + route[i].location + '</p>'
            marker.instruction += '<p style="font-size: 12px;text-align: left">更新时间:' + route[i].ymd + route[i].hms + '</p>'
            // 将marker注入地图显示
            group.addObject(marker)
            if (i == route.length-1) {
//            that.map.setCenter({lat: route[i].lat, lng: route[i].lng})
              this.openBubble({lat: route[i].lat, lng: route[i].lng}, marker.instruction)
            }
          }
          // 添加事件监听
          group.addEventListener('tap', function (evt) {
            that.map.setCenter(evt.target.getPosition())
            // 生成弹框
            that.openBubble(
              evt.target.getPosition(), evt.target.instruction)
          }, false)
          // Add the maneuvers group to the map
          this.map.addObject(group)
        }
        if(this.mapType=='baidu') {
          // 点
          for (let i in route) {
            var pt = new BMap.Point(route[i].lng, route[i].lat);
            var  myIcon;
            if(i==0){
              myIcon = new BMap.Icon("../../../static/img/icon/stra.png", new BMap.Size(25,25));
            }else {
              if(i == route.length - 1 && i != 0){
                myIcon = new BMap.Icon("../../../static/img/icon/end.png", new BMap.Size(30,40));
              }else {
                myIcon = new BMap.Icon("../../../static/img/icon/deft.png", new BMap.Size(15,15));
              }
            }
            var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
            this.map.addOverlay(marker);
            var content = '<p style="font-size: 14px;text-align: left">当前:' + route[i].location; + '</p>';
            var opts = {
              width : 250,     // 信息窗口宽度
              height: 80,     // 信息窗口高度
              title : "当前位置" , // 信息窗口标题
              enableMessage:true//设置允许信息窗发送短息
            };
            this.addClickHandler(content,marker,opts);
            if(i == route.length - 1 ){
              var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
              this.map.openInfoWindow(infoWindow, new BMap.Point(route[i].lng,route[i].lat));
            }// 将标注添加到地图中
            this.openBubble(route[i])
          }
          //弹框
        }
        if(this.mapType=='google'){
          for( let i in route){
            var myIcon  = {
              url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
              // This marker is 20 pixels wide by 32 pixels high.
              //size: new google.maps.Size(20, 32),
              // The origin for this image is (0, 0).
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(0, 20)
            };
            var myCenter=  new google.maps.LatLng(route[i].lat,route[i].lng);
            if(i==0){
              myIcon.url = "../../../static/img/icon/stra.png"
              myIcon.anchor= new google.maps.Point(13, 13)
            }else {
              if(i == route.length - 1 && i != 0){
                myIcon.url = "../../../static/img/icon/end.png"
                myIcon.anchor= new google.maps.Point(13, 25)
                // this.map.setCenter(myCenter)
              }else {
                myIcon.url = "../../../static/img/icon/deft.png"
                myIcon.anchor= new google.maps.Point(8, 8)
              }
            }
            var marker=new google.maps.Marker({
              position:myCenter,
              icon:myIcon
            });
            marker.setMap(this.map);
            var that = this
            google.maps.event.addListener(marker,'click',function() {
              var marker = new google.maps.LatLng(route[i].lat,route[i].lng);
              var s =that.openBubble(route[i])
              s.setPosition(marker);
              s.open(that.map)
            });

            var T = this.openBubble(route[i])
            if( i == route.length-1){
              T.open(this.map,marker);
              if(a){
                this.mergeList()
              }else {
                var parm  = {
                  first: this.ULlist.first,
                  list:this.ULlist.list,
                  last:this.ULlist.last,
                  listCnut:this.ULlist.listCnut ,
                }
                this.ulListDATA = parm
              }
            }
          }
        }
      },
      // 标注弹框
      openBubble (position,text) {
        //here 地图
        if(this.mapType=='here'){
          if (!this.bubble) {
            // 没有新建
            this.bubble = new H.ui.InfoBubble(
              position,
              // The FO property holds the province name.弹框类容
              {content: text, style: 'color:#999'})
            // 再ui组件中添加弹框
            this.ui.addBubble(this.bubble)
          } else {
            // 从新赋值
            this.bubble.setPosition(position)
            this.bubble.setContent(text)
            // 从新打开，刷新数
            this.bubble.open()
          }
        }
        // 百度地图弹框
        if(this.mapType=='baidu'){
          //组合弹框和坐标



        }
        if(this.mapType=='google'){
          var content = '<p style="font-size: 14px;text-align: left;color: #1d2739">'+this.languageData.public.now+':' + position.location; + '</p>';
          content += '<p style="font-size: 12px;text-align: left;color: #1d2739">'+this.languageData.public.updateOn+':' + position.ymd + position.hms + '</p>';
          content += '<p style="font-size: 12px;text-align: left;color: #1d2739">' + position.timeStayText + '</p>'
          if(!this.bubble){
            this.bubble = new google.maps.InfoWindow({
              content:content,
            });
          }else {
            this.bubble.setContent(content)
          }
          return  this.bubble
        }
        // 有无弹框
      },
      // 合并 操作列表和 轨迹列表
      mergeList(a){
        // a ：2 第一次切换到只看状态列表，更改标记 this.firs
       if(a==2){this.firs = false}
       // 声明 list 存放 排序列表
        var list = ''
        if(a){
         // 查看 位置列表是否为空 为空只拼接 操作列表
          list = this.dataChart.transOrderOpers || []
        }else {
          // 查看 位置列表是否为空 不为空 拼接 操作列表和位置列表
          list = []
          // 过滤为空的 默认值列表
          var x =  this.ULlist.first
          var x1 =  this.ULlist.last;
          var x2 =  this.dataChart.transOrderOpers
          if(!x.location && !x.operStatusCN){
            x = []
          }
          if(!x1.location && !x1 .operStatusCN){
            x1 = []
          }
          list = list.concat(x,x1,this.ULlist.list,x2)
        }
        this.ULlist.listCnut = list.length
        // 对象按照operTime排序
        list = list.sort(this.compare('operTime'))
        // 取出第一个做
        this.ULlist.first = list[0] ||{
          location:null
        }
       //大于1个长度，取出来最后面一个
        if(list.length>1){
          var lent = list.length - 1
          this.ULlist.last = list[lent]||{
            location:null
          }
          //  剪切第一个和第二个，赋值list
          list.splice(lent,1)
          list.splice(0,1)
          if(list[0] ||  list[0]){
            this.ULlist.list = list
          }else {
            this.ULlist.list = []
          }
        }else {
          //大于小于等于 1个长度，最后一个给出默认值
          this.ULlist.first = {
            location:null
          };
          this.ULlist.last = list[0] || {
            location:null
          };
        }
        // 非第一次调用时候计算个数
        if(a){
          if (this.languageCheak == 'Chinese') {
            var le = this.ULlist.listCnut
            this.clickText = '共 ' + le + ' 个位置'
          }
          if (this.languageCheak == 'English') {
            var le = this.ULlist.listCnut
            this.clickText = le + ' tracking event'
          }
          // 第一次调用时记录全部列表
          var parm  = {
            first: this.ULlist.first,
            list:this.ULlist.list,
            last:this.ULlist.last,
            listCnut:this.ULlist.listCnut  ,
          }
          this.ulListData = parm
        }else {
          // 第一次调用时记录全部列表
         var parm  = {
            first: this.ULlist.first,
            list:this.ULlist.list,
            last:this.ULlist.last,
           listCnut:this.ULlist.listCnut ,
          }
          this.ulListDATA = parm
        }
      },
      saechFn () {
        this.showBox = true
         //传入搜索条件
        this.input = this.input.replace(/，/ig,',')
        var str = this.input
        str = str.replace(/(^\s*)|(\s*$)/g, "")
        if (!str) {
          return false
        }
        var parm = {
          code: this.input
        }
        // 清空 vuex 列表
        this.$store.commit('transportListTo', null)
        if (this.user.id) {
          this.checkNumber(parm)
        } else {
          if(this.fromBy == 'web'){
            var data = this.input.split(',');
            data = Public.publicLo.Deduplication(data)
            data = data.join(',');
            var parm = {billNumbers:data};

            this.sechByBlill(parm);
          }else {this.checkID(parm)}

        }
      },
      back(){
        if(this.$route.query.id){
          this.$router.go(-1)
        }else {
          this.firstSech = true;
          this.$store.commit('shechDat', null)
        }
      },
      // 列表查询
      listFn (id) {
        var parm = {
          id: id
        }
        this.showBox = false;
        this.id = id
        // 清空 vuex 地图列表
        this.$store.commit('addMapList', null)
        // 查询
        this.mapListpost(parm)
      },
      // 点开列表
      opentList () {

        var dom = document.getElementById('ul'),
          H = dom.scrollHeight,i=0,
          dom2 = document.getElementById('sty'),
          str = ''

        if ( !this.clickStatus) {
          // 判断ul高度，给出超出隐藏
          if (H > 300) {

            dom.style.height =  '300px' ;//      {height:'300px',overflow:'scroll'}
            dom.style['overflow-y']= 'scroll'
            H = 300
          }

          // 加载动画
          str += '#bodyBox #ul{ height:0px; animation: myA 1s forwards;  } @keyframes myA {0%{height: 0px;} 100%{height: '+ H +'px;}';
          dom2.innerHTML = str
          this.clickStatus = true
          // 区分语言 给出点击提示
          if (this.languageCheak == 'Chinese') {
            this.clickText = '点击收起'
          }
          if (this.languageCheak == 'English') {
            this.clickText =  'Fold'
          }
          return false
        } else {
          // 收起状态
          var dom = document.getElementById('ul'),
            dom2 = document.getElementById('sty')
          // str = '#bodyBox #ul{ height:'+ 0 +'px;  }'
          str += '#bodyBox #ul{ height:'+ H +'px; animation: myA 1s forwards;  } @keyframes myA {0%{height: height:'+ H +'px;} 100%{height: '+ 0 +'px;}';
          dom2.innerHTML = str
          this.clickStatus = false
          if (this.languageCheak == 'Chinese'){
            var le = this.ULlist.listCnut
            this.clickText = '共 ' + le + ' 个位置'
          }
          if (this.languageCheak == 'English'){
            var le = this.ULlist.listCnut
            this.clickText = le + ' tracking event'
          }
        }
      },
      // 点击事件
      addClickHandler(content,marker,opts){
        var that=this
        marker.addEventListener("click",function(e){
            that.openInfo(content,opts,e)
          }
        );},
      // 弹框
      openInfo(content,opts,e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      },
      // 解析地图数据
      mapListDate (res) {
        //console.log(res)
        res = res.body.data
        var pushList = []  // 经纬度地图列表
        var startTime = { ymd: '', hms: '' };

        if (res.startTime) {
          startTime = Public.publicLo.timeCheng(res.startTime)
        }
        var transportStatustext = {EN:'',CN:''}
        if(res.transportStatus==0){
          transportStatustext = {EN:'In transit',CN:'运输中'}
        }
        if(res.transportStatus==1){
          transportStatustext = {EN:'Finished',CN:'运输完成'}
        }
        var deviceOnffText = ''
        if(res.deviceOnff==1){
          deviceOnffText = {EN:'Online',CN:'在线'}
        }
        if(res.deviceOnff==0){
          deviceOnffText = {EN:'Offline',CN:'离线'}
        }
        if(res.deviceOnff==2){
          deviceOnffText = {EN:'sleep',CN:'休眠'}
        }
        var transOrderOperResponse = {
          "id":'',
          "orderId":'',
          "operStatus":'',
          "operTime":'',
          operTimeText:'',
          "station":''
        },
        dat = []
      if(res.transOrderOpers){
          transOrderOperResponse = res.transOrderOpers
        for(let i in transOrderOperResponse){
          var operTimeText =  Public.publicLo.timeCheng(transOrderOperResponse[i].operTime)
          var  pu ={
            operStatus:transOrderOperResponse[i].operStatus,
            operStatusCN:Public.publicLo.doing(res.transportType,transOrderOperResponse[i].operStatus).CN,
            operStatusEN:Public.publicLo.doing(res.transportType,transOrderOperResponse[i].operStatus).EN,//操作状态,
            operTimeText: operTimeText.ymd + ' ' + operTimeText.hms,//操作时间
            operTime:transOrderOperResponse[i].operTime,
            station:transOrderOperResponse[i].station|| ''//备注
          }
          dat.push(pu)
        }
       }
       // 基础信息组装
        var estimatedArrivalTime = ""

        if(res.estimatedArrivalTime && res.estimatedArrivalTime !=-1){
          var timeClear = res.estimatedArrivalTime - new Date().getTime()
          if(timeClear<0){
            if(res.transportStatus == 1){estimatedArrivalTime = '已到达'}else {estimatedArrivalTime = '已逾期'}
          }else {
            var x = Public.publicLo.datatmie(timeClear,1000).timeD
            if(x<1){estimatedArrivalTime = '今天到达'}
            else if(x<2){estimatedArrivalTime = '明天到达'}
            else if(x<3){estimatedArrivalTime = '后天到达'}
            else if(x>=3){estimatedArrivalTime = x +'天后到达'}
          }
        }else {

        }

        var timeStay = Public.publicLo.dataToTmie(res.timeStay,this.languageData.id)
        var startPosition,endPosition;
        if(res.startPosition){
          startPosition = Public.publicLo.getCityById(res.startPosition)
        }
        if(res.endPosition){
          endPosition = Public.publicLo.getCityById(res.endPosition)
        }
        var chart = {
          containerId: res.containerId || '',
          transportStatus: res.transportStatus,
          transportStatustext: transportStatustext,
          deviceOnffText: deviceOnffText,
          transportType: res.transportType,
          deviceNumber: res.deviceNumber,
          startTime: startTime.ymd + startTime.hms,
          transOrderOpers:dat,
          timeStay:res.timeStay,
          timeStayText:timeStay,
          estimatedArrivalTime:estimatedArrivalTime,
          startPosition: startPosition.cityCN,
          endPosition:endPosition.cityCN,
          startPositionEn: startPosition.cityEn,
          endPositionEn:endPosition.cityEn,
        }
        // 基础信息
        this.dataChart = chart;
        if(this.fromBy != 'web'){
          this.byBlillList = []
          this.byBlillList.push({
            startPosition:startPosition.cityCN,
            startPositionEN:startPosition.cityEN,
            id:-1,
            endPosition:endPosition.cityCN,
            endPositionEN:endPosition.cityEN,
          });
        }
        // console.log(this.dataChart)
        var ulList = {
          first: null, // 开始地址
          list: [],   // 中间地址
          last:  null, //  第二次地址
          listCnut: null
        } // 运输ul列表
        res = res.tracks
        var leng = res.length
        if (res.length > 0) {
          for (let i in res) {
            var time = Public.publicLo.timeCheng(res[i].time)
            if( !res[i].location){
              if (this.languageCheak == 'Chinese') {
                res[i].location = 'No Data'
              }
              if (this.languageCheak == 'English') {
                res[i].location = 'No Data'
              }
            }
            var Result = Public.publicLo.dataToTmie(res[i].timeStay,this.languageData.id)

            var pu = {
              containerId: chart.containerId,
              transportStatus: chart.transportStatus,
              deviceNumber: chart.deviceNumber,
              lat: res[i].latitude, // 经度
              lng: res[i].longitude, // 纬度
              ymd: time.ymd,   // 日期
              hms: time.hms,   // 时间
              time: time.ymd + ' ' +  time.hms,
              timeStay:res[i].timeStay,
              timeStayText: Result,
              operTime:res[i].time,
              location: res[i].location, // 地址信息
            }
            this.tableData.push(pu)
            if (i == 0) {
              // 导入第一条 ul显示数据
              ulList.last = pu
              ulList.first= {
                lat: null, // 经度
                  lng: null, // 纬度
                  ymd: null,   // 日期
                  hms: null,   // 时间
                  location: null // 地址信息
              } //  第二次地址
              // 创建地点中心图
              if(this.map){
                this.mapFn(this.map, pu)
              }
            }
            if (i >= leng - 1 && leng > 1) {
              // 导入最后一条ul的显示数据
              ulList.listCnut = leng
              // 导入第一条 ul显示数据
              ulList.first = pu
            }
            if (i > 0 && i < leng - 1) {
              // 导入最后ul中间的
              ulList.list.push(pu)
            }
            if (i >= leng - 1 ) {
              // 导入最后一条ul的显示数据
              // if(res[i].timeStay){
              //   this.dataChart.timeStayText = Result.timeD+'天'+ Result.timeH + '小时'+Result.timeM+'分'+Result.timeS + '秒'
              // }
            }
            // 组装路径和标注点
            pushList.push(pu)
          }
         this.ULlist = ulList
          // 绘画轨迹
          if (pushList.length >= 1) {
            this.addRouteShapeToMap(pushList,ulList.first.location)
          }
        } else {
          this.ULlist = {
            first: {
              lat: null, // 经度
              lng: null, // 纬度
              ymd: null,   // 日期
              hms: null,   // 时间
              location: null // 地址信息
            }, // 开始地址
            list: [],   // 中间地址
            last: {
              lat: null, // 经度
              lng: null, // 纬度
              ymd: null,   // 日期
              hms: null,   // 时间
              location: null // 地址信息
            }, //  第二次地址
            listCnut: null
          }
          if(this.mapType=='here'){
            this.mapFn(this.map)
          }
          if(this.mapType=='baidu') {
            this.baiduMap()
          }
          if(this.mapType=='google') {
            this.googleMap()
          }
        }
       // if(!this.ULlist.last.location){
       //    this.mergeList(1)
       // }
        // 判断中英文
        if (this.languageCheak == 'Chinese') {
          var le = this.ULlist.listCnut
          this.clickText = '共 ' + le + ' 个位置'
        }
        if (this.languageCheak == 'English') {
          var le = this.ULlist.listCnut
          this.clickText = le + ' tracking event'
        }
        if(this.fromBy == 'web'){
          this.show3 = !this.show3;
        }
      },
      // 点击地点切换弹框
      updateMap (list) {
        if(!list.lat){return}
        if(this.mapType=='here'){
          var instruction = '<p style="font-size: 14px;text-align: left">当前:' + list.location + '</p>'
          instruction += '<p style="font-size: 12px;text-align: left">更新时间:' + list.ymd + list.hms + '</p>'
          instruction += '<p style="font-size: 12px;text-align: left">' + list.timeStayText + '</p>'
          this.map.setCenter({lat: list.lat, lng: list.lng})
          this.openBubble({lat: list.lat, lng: list.lng}, instruction)
        }
        if(this.mapType=='baidu'){
          var instruction = '<p style="font-size: 14px;text-align: left">当前:' + list.location + '</p>'
          instruction += '<p style="font-size: 12px;text-align: left">更新时间:' + list.ymd + list.hms + '</p>'
          var point = new BMap.Point(list.lng, list.lat);
          var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "当前位置" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
          };
          var infoWindow = new BMap.InfoWindow(instruction, opts);  // 创建信息窗口对象
          this.map.openInfoWindow(infoWindow, point); //开启信息窗口
        }
        if(this.mapType=='google'){
          var marker = new google.maps.LatLng(list.lat,list.lng);
          var T = this.openBubble(list)
          T.setPosition(marker);
          T.open(this.map)
        }
      },
      // 复制
      copyFn (a) {
        var clipboard = new Clipboard('.bot');
        var text = this.languageData.id=='Chinese'?'复制成功':"copy success"
        this.openSuccess(text)
      },
      copyF2(a){
        var clipboard = new Clipboard('.linkText');
        var text = this.languageData.id=='Chinese'?'复制链接成功':"link copy success"
        this.openSuccess(text)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      // 导出execl表格
      export2Excel() {
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../vendor/Export2Excel');
          var tHeader = ['设备号', '柜号（车牌号）', '创建时间', '纬度', '经度', '地址'];
          if(this.languageData.id == 'English'){
            tHeader = ['Container No', 'Plate No', 'Created on', 'Latitude', 'longitude', 'address']
          }
          const filterVal = ['deviceNumber', 'containerId', 'time', 'lat', 'lng', 'location'];
          const list = this.tableData;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, 'locationList');
        })
      },
      sev(){
        if(this.mapType=='here'){
          this.mapService()
        }
        if(this.mapType=='baidu'){
          this.baiduMap()
        }
        if(this.mapType=='google'){
          this.googleMap()
        }
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      compare:function(property){
        return function(a,b){
          var value2 = a[property];
          var value1 = b[property];
          return value1 - value2;
        }
      },
      //分享
      fenxing(){
        var locat=location.href
        if(locat.indexOf('type')<0){
          locat+='&type=-3'
        }
        var p = {
          url:locat, /*获取URL，可加上来自分享到QQ标识，方便统计*/
          desc:'', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
          title:'', /*分享标题(可选)*/
          summary:'', /*分享摘要(可选)*/
          pics:'http://a1.qpic.cn/psb?/V12UQxcl3Nkj4H/EyqI4S8c7*Wcml9TbHLrH7ehuhqijMIp7m.FPGjHv*o!/b/dAgBAAAAAAAA&ek=1&kp=1&pt=0&bo=gAKAAoACgAIBACc!&tm=1521118800&sce=0-12-12&rf=viewer_311', /*分享图片(可选)*/
          flash: '', /*视频地址(可选)*/
          site:'', /*分享来源(可选) 如：QQ分享*/
          style:'102',
          width:63,
          height:24
        };
        var s = [];
        for(var i in p){
          s.push(i + '=' + encodeURIComponent(p[i]||''));
        }
       s = s.join('&')

        // var ss = 'http://connect.qq.com/widget/shareqq/widget.html?url=http%3A%2F%2F192.168.1.108%3A8066%2F%23%2Fmap%3Fid%3D319%26type%3D-2&desc=&title=&summary=&pics=http%3A%2F%2Fa1.qpic.cn%2Fpsb%3F%2FV12UQxcl3Nkj4H%2FEyqI4S8c7*Wcml9TbHLrH7ehuhqijMIp7m.FPGjHv*o!%2Fb%2FdAgBAAAAAAAA%26ek%3D1%26kp%3D1%26pt%3D0%26bo%3DgAKAAoACgAIBACc!%26tm%3D1521118800%26sce%3D0-12-12%26rf%3Dviewer_311&flash=&site=QQ%E5%88%86%E4%BA%AB&style=102&width=63&height=24&showcount='
        // var sss = "http://connect.qq.com/widget/shareqq/index.html?"+ s.join('&')
        // console.log(sss)
        window.open("http://connect.qq.com/widget/shareqq/index.html?"+s);
      },
      // 微信分二维码
      wxImg(id){
        var url = 'https://app.ejialian365.com/'+id
          var data = {
            ticket:id,
            expire_seconds:'32000',
            width:100
          }

        this.$http.get(url,{params:data} ).then(function (res) {
          //通过 commit addMapList 方法 统一注入sate


        }).catch(function (res) {

        })
      },
      qrCodeFn(){
        this.dialogVisible=true
        var locat=location.href
        if(locat.indexOf('type')<0){
          locat+='&type=-3'
        }
        var that = this;
       var url =  'https://app.ejialian365.com?id='+this.id;
       // console.log(url)
        setTimeout(function(){
          that.certMage(document.getElementById('qrCode'),url);
        },100)

      },
      //
      certMage:function(dom,url){
        if (!dom) return;
        if (this.qrcode) {
          this.qrcode.clear();
          this.qrcode.makeCode(url);
        } else {
          this.qrcode = new QRCode(dom,{
            text:url,
            width: 210,
            height: 210,
            colorDark: '#000000',
            colorLight: '#ffffff'
          });
        }
      },
      // bill线路列表
      byBlillFn(res){
        if(res.body.status == '40004'){
          var text = this.languageData.id == 'Chinese'?'提单号不存在':' Lading Bill No. not exist.'
          this.openError( res.body.message + text)
          return
        }
        res = res.body.data;
        var push = []
        for(let i in res){
          var startPosition ,endPosition;
          // console.log(0)
          if(res[i].origin){
            startPosition = Public.publicLo.getCityById(res[i].origin)
          }
          if(res[i].destination){
            endPosition = Public.publicLo.getCityById(res[i].destination)
          }
          // console.log(startPosition)
          var pu = {
            startPosition:startPosition.cityCN,
            startPositionEN:startPosition.cityEN,
            id:res[i].id,
            billNumber:res[i].billNumber,
            endPosition:endPosition.cityCN,
            endPositionEN:endPosition.cityEN,
          }
          push.push(pu)
        }
        this.byBlillList = push
      },
    },
    computed: {
      // 查询条件
      deviceId: function () {
        var parm = this.shechIput;
        var data = null;
         if (parm) {
           data = parm;
           this.firstSech = false; // 隐藏
           // console.log( this.firstSech ,'firstSech')
           this.input = parm
         }
        return data
      },
      // 语言切换
      languageData: function () {
        var parm = this.language
        if (parm) {
          this.languageCheak = parm.check
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
          }
        }
        return parm
      },
      // 地图列表数据
      mapLi: function () {
        var parm = this.mapList;
        // console.log(parm,'mapList')
        if (parm) {
          // 解析计算地图列表
          var str = JSON.stringify(this.list2)
          var str2 = JSON.stringify(parm)

          if(str != str2){
            this.list2 = parm
            var string1 = JSON.stringify(this.fisrtList)
            var string2 = JSON.stringify(parm.body)
            if (string1 != string2) {
              if (this.mapDate) {
                this.mapListDate(parm)
              } else if (!this.id && !this.mapDate) {
                if (this.input) {
                  this.mapListDate(parm)
                }else {
                  this.mapDate = parm
                }
              } else if (this.id && !this.mapDate) {
                this.mapDate = parm
                this.mapListDate(parm)
              }
              this.fisrtList = parm.body
            }
          }
        }
        return 1
      },
      transport: function () {
        var parm = this.transportList || null
        this.errorText = ''
        if (parm) {
          if(parm.code == 1){
            this.errorText = this.languageData.id=='Chinese'?'暂无此类订单': 'No such data'
          }
          if(parm.code == -1){
            this.errorText = this.errorDate = this.languageData.id=='Chinese'?'数据请求异常，请稍后重试': 'Request error Please try again later'
          }
          parm = parm.body.data
        }
        return parm
      },
      ssechByBlilData: function () {
      var parm = this.sechByBlillsList || null;
      if (parm) {
        this.byBlillFn(parm);
        parm = 1
      }
      return parm
    },
      // weix
      tokenWxFn(){
        var parm = this.tokenWxData;
        if(parm){
          wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId:  parm.body.data.appid ||'', // 必填，公众号的唯一标识
            timestamp:parm.body.data.timestamp ||'', // 必填，生成签名的时间戳
            nonceStr: parm.body.data.nonceStr||'', // 必填，生成签名的随机串
            signature: parm.body.data.signature||'',// 必填，签名，见附录1
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'getNetworkType',
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
         this.wxImg(parm.body.data.ticket)
          wx.ready(function() { //通过ready接口处理成功验证
// config信息验证成功后会执行ready方法
            var locat=location.href
            if(locat.indexOf('type')<0){
              locat+='&type=-3'
            }

            var dom = document.getElementById('wx')
            if(dom){


                wx.onMenuShareAppMessage({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
                  title: '运踪宝', // 分享标题
                  desc: '给你分享一个链接!', // 分享描述
                  link: locat, // 分享链接
                  imgUrl: 'http://a1.qpic.cn/psb?/V12UQxcl3Nkj4H/EyqI4S8c7*Wcml9TbHLrH7ehuhqijMIp7m.FPGjHv*o!/b/dAgBAAAAAAAA&ek=1&kp=1&pt=0&bo=gAKAAoACgAIBACc!&tm=1521118800&sce=0-12-12&rf=viewer_311', // 分享图标
                  type: '', // 分享类型,music、video或link，不填默认为link
                  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                  success: function(e) {
                    // 用户确认分享后执行的回调函数

                  },
                  cancel: function (e) {

                  }
                });

            }
              // cancel: function() {
              //   // 用户取消分享后执行的回调函数
              //   console.log("取消分享")
              // }

            wx.onMenuShareTimeline({ //分享朋友圈
              title: '标题', // 分享标题
              link: '链接',
              imgUrl: '图片', // 分享图标
              success: function() {
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          });
          wx.error(function(res){//通过error接口处理失败验证
            // config信息验证失败会执行error函数

          });
         // this.wxImg(parm.body.data.access_token)
        }
        return 1
      },
      shechidDda(){
        var parm = this.shechid
        var data = ''
        if (parm) {
          data = parm
        this.id = parm
        }
        return data
      },
      ...mapState([
        'shechIput',
        'language',
        'mapList',
        'tokenWxData',
        'transportList',
        'shechid',
        'sechByBlillsList'
      ])
    },
    mounted () {
      // var ul = location.href.split('#')[0]
      // this.tokenWx({url :ul})
      var body = document.documentElement.clientHeight
      var dom  = document.getElementById('map')
      body = body - 52
      dom.style.height = body + 'px';
      this.sev();
      // 有无参数传过来
      this.id = this.$route.query.id;
     // location.href = 'cargoo://map?id='+this.id
      this.type = this.$route.query.type;
      var locat=location.href;
      if(locat.indexOf('type')<0){
        locat+='&type=-3'
      }
      this.linkText = locat;

      if(this.versions.ios && this.type<0){
          location.href = 'cargoo://map?id='+this.id;
         this.moblie = true;
         setTimeout(function () {
           document.getElementsByTagName('body')[0].style = '';

         },500)
       // this.$router.push({name:'mobli',query: {id: this.id,type:this.type-1}});
      }
      if(this.versions.android && this.type<0){
        location.href = 'cargoo://map?id='+this.id;
        this.moblie = true;
        setTimeout(function () {
          document.getElementsByTagName('body')[0].style = '';
        },500)
        //this.$router.push({name:'mobli',query: {id: this.id,type:this.type-1}});
      }
      if (this.id) {
        var parm = {
          id: this.id
        }
        this.firstSech = false
        //
        this.mapListpost(parm)
        if (this.mapDate) {
          this.mapListDate(this.mapDate)
        }
      }

    },
    components: {
      HeaderPublc: HeaderPublc, saechFirst: saechFirst
    }
  }
</script>

